import React from 'react';
import { Menu, Layout } from 'antd';
import styles from './index.less';

import OperateTableDemo from './operateTable';

const { Header, Content } = Layout;
const { SubMenu } = Menu;

class Operation extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      selectKey: '11',
      openKey: '1',
    };
  }

  menuList = [
    { key: '11', name: '监控1', component: <OperateTableDemo tableType={'getProductData'} queryId={'1'} /> },
    { key: '12', name: '监控2', component: <OperateTableDemo tableType={'getProductData'} queryId={'2'} /> },
    { key: '13', name: '监控3', component: <OperateTableDemo tableType={'getProductData'} queryId={'3'} /> },
    { key: '14', name: '监控4', component: <OperateTableDemo tableType={'getProductData'} queryId={'4'} /> },
    { key: '15', name: '监控5', component: <OperateTableDemo tableType={'getProductData'} queryId={'5'} /> },
    { key: '16', name: '监控6', component: <OperateTableDemo tableType={'getProductData'} queryId={'6'} /> },
    { key: '17', name: '监控7', component: <OperateTableDemo tableType={'getProductData'} queryId={'7'} /> },
    { key: '18', name: '监控8', component: <OperateTableDemo tableType={'getProductData'} queryId={'8'} /> },
    { key: '19', name: '监控9', component: <OperateTableDemo tableType={'getProductData'} queryId={'9'} /> },
    { key: '20', name: '监控10', component: <OperateTableDemo tableType={'getProductData'} queryId={'10'} /> },
  ];

  changeMenu = (e) => {
    this.setState({
      selectKey: e.key,
    });
  };

  render() {
    return (
      <div className={styles.operateTable}>
        <Header className={styles.header}>运维表格</Header>
        <Layout style={{ display: 'flex', flexDirection: 'row', background: 'white' }}>
          <div className={styles.menu} style={{ height: 'calc(100vh - 64px)' }}>
            <Menu onClick={this.changeMenu} style={{ width: 220 }} defaultSelectedKeys={[this.state.selectKey]} defaultOpenKeys={[this.state.openKey]} mode='inline'>
              <SubMenu key='1' title='运维表格'>
                <Menu.Item key='11'>监控1</Menu.Item>
                <Menu.Item key='12'>监控2</Menu.Item>
                <Menu.Item key='13'>监控3</Menu.Item>
                <Menu.Item key='14'>监控4</Menu.Item>
                <Menu.Item key='15'>监控5</Menu.Item>
                <Menu.Item key='16'>监控6</Menu.Item>
                <Menu.Item key='17'>监控7</Menu.Item>
                <Menu.Item key='18'>监控8</Menu.Item>
                <Menu.Item key='19'>监控9</Menu.Item>
                <Menu.Item key='20'>监控10</Menu.Item>
              </SubMenu>
            </Menu>
          </div>

          <Content
            style={{ border: '1px solid lightgray', height: 'calc(100vh - 80px)', width: 'calc(100vw - 220px)', marginLeft: '16px', overflowY: 'scroll', overflowX: 'auto' }}
          >
            {this.menuList.find((item) => item.key === this.state.selectKey).component}
          </Content>
        </Layout>
      </div>
    );
  }
}

export default Operation;
